<template>
 <div>
    <p>业务日志</p>
    <div class="business">
    <div class="block">
      <el-date-picker v-model="value1" type="date" placeholder="开始时间"></el-date-picker>
    </div>
    <div class="block">
      <el-date-picker
        v-model="value2"
        align="right"
        type="date"
        placeholder="结束时间"
        :picker-options="pickerOptions"
      ></el-date-picker>
    </div>
    <input type="text" placeholder="日志名称" />

    <el-dropdown :hide-on-click="false">
      <span class="el-dropdown-link">
       日志
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>日志类型</el-dropdown-item>
        <el-dropdown-item>业务日志</el-dropdown-item>
        <el-dropdown-item>异常日志</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>
    <el-button>重置</el-button>
    <el-button>清空日志</el-button><br>
  </div>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">日志名称</el-menu-item>
  <el-submenu index="2">
    <template slot="title">日志类型</template>
  </el-submenu>

  <el-menu-item index="3" disabled>用户名称</el-menu-item>
  <el-menu-item index="4">方法名</el-menu-item>
    <el-menu-item index="4">时间</el-menu-item>  <el-menu-item index="4">类名</el-menu-item>
</el-menu>
 <div class="myzd">
   没有找到匹配的目录
 </div>
 <div class="kb">

 </div>
<!-- <div class="line"></div>
<el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b">
  <el-menu-item index="1">用户名称</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作台</template>
  </el-submenu>
  <el-menu-item index="3" disabled>消息中心</el-menu-item>
  <el-menu-item index="4">订单管理</el-menu-item>
</el-menu> -->
  </div>
 </div>
  
</template>

<script>
export default {
  data() {
    return {
      inpu: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      value1: "",
      value2: ""
    };
  }
};
</script>

<style lang="stylus" scoped>
.business {
  display: flex;
}
 .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .myzd{
    text-align center
    background-color:#eee;
  }
  .kb{
    border:1px solid #ccc;
    width 100%;
    height 400px;
  }
</style>
